<!--  -->
<template>
  <div id="index">
       <!--  DataV-Loading加载动画 -->
       <dv-loading v-if="loading" :style="{'font-weight': 500}">Loading...</dv-loading>
       <!-- 总体布局-start -->
        <div v-else class="koi-body">
          <!-- 第一部分-头部-start -->
            <div class="header">
              <!-- 首页 -->
<!--              <span class="koiPage font-bold colorDeepskyblue" @click="handleSkip()" :style="{'font-size': Math.round(koiParams.screen.screenWidth/100) + 'px'}" >首页</span>-->
              <!-- 时间 -->
              <div class="localTime colorPink" :style="{'font-size': Math.round(koiParams.screen.screenWidth/100) + 'px'}">{{ koiParams.dateParams.dateYear }} {{ koiParams.dateParams.dateWeek }} {{ koiParams.dateParams.dateDay }}</div>
              <!-- 装饰10 -->
              <dv-decoration-10 class="dv-dec-10-left" />
              <!-- 装饰8 -->
              <dv-decoration-8 class="dv-dec-8-left" :color="decorationColor"/>
              <!-- 标题 -->
              <span class="title font-bold colorText" :style="{'font-size': Math.round(koiParams.screen.screenWidth/100) + 'px'}">呼叫管理展示平台</span>
              <!-- 装饰8 -->
              <dv-decoration-8 class="dv-dec-8-right" :reverse="true" :color="decorationColor" />
              <!-- 装饰10 -->
              <dv-decoration-10 class="dv-dec-10-right"/>
          </div>
          <!-- 第一部分-头部-end -->

        <!-- ElementPlus Layout布局 -->
        <div class="layoutHome">
          <el-row>
            <el-col :span="6">
              <div :style="{ height: koiParams.height.YHLeftOne + 'px'}">
                <dv-border-box-12 style="padding:12px">
                  <leftchart1 ></leftchart1>
                </dv-border-box-12>
              </div>

              <div :style="{ height: koiParams.height.YHLeftTwo + 'px'}">
                <!-- style="padding:12px" -->
                <dv-border-box-12 style="padding:12px">
                  <leftchart2></leftchart2>
                </dv-border-box-12>
              </div>
            </el-col>

            <el-col :span="9">
              <div :style="{ height: koiParams.height.YHCenterOne + 'px'}">
                <dv-border-box-12 style="padding:12px">
                  <centerchart1></centerchart1>
                </dv-border-box-12>
              </div>
              <div :style="{ height: koiParams.height.YHCenterTwo + 'px'}">
                <dv-border-box-12 style="padding:12px">
                  <centerchart2></centerchart2>
                </dv-border-box-12>
              </div>
              <div :style="{ height: koiParams.height.YHCenterThree + 'px'}">
                <dv-border-box-12 style="padding:12px">
                  <centerchart3></centerchart3>
                </dv-border-box-12>
              </div>
            </el-col>

            <el-col :span="9">
              <div :style="{ height: koiParams.height.YHRightOne + 'px'}">
                <dv-border-box-12 style="padding:12px">
                  <rightchart1></rightchart1>
                </dv-border-box-12>
              </div>
              <div :style="{ height: koiParams.height.YHRightTwo + 'px'}">
                <dv-border-box-12 style="padding:12px">
                  <rightchart2></rightchart2>
                </dv-border-box-12>
              </div>
              <div :style="{ height: koiParams.height.YHRightThree + 'px'}">
                <dv-border-box-12 style="padding:12px">
                  <rightchart3></rightchart3>
                </dv-border-box-12>
              </div>
            </el-col>

          </el-row>
        </div>
          <!-- 总体布局end -->
        </div>
   </div>
</template>

<script setup lang="ts">
// 导入状态管理
import { reactive, ref, watch, h, onMounted, onBeforeMount, onBeforeUnmount, onUnmounted } from 'vue';
//import koi from '../utils/session.js';
import { formatTime } from '@/utils/index';
// 引入 ElementPlus 的 ElNotification 消息提示。注意：ElementPlus在main.ts中注册后，在<template>标签中是全局引用的，但是在ts或者js中还是需要单独引入相关组件
import { ElNotification } from 'element-plus'
import Leftchart1 from "@/components/largescreen/leftchart1.vue";
import Centerchart1 from "@/components/largescreen/centerchart1.vue";
import Centerchart2 from "@/components/largescreen/centerchart2.vue";
import Rightchart1 from "@/components/largescreen/rightchart1.vue";
import Rightchart2 from "@/components/largescreen/rightchart2.vue";
import Rightchart3 from "@/components/largescreen/rightchart3.vue";
import Centerchart3 from "@/components/largescreen/centerchart3.vue";
import Leftchart2 from "@/components/largescreen/leftchart2.vue";

  // 单个使用ref
  const decorationColor = ref<string[]>(['#568aea', '#000000']); // 装饰8颜色
  const loading = ref<boolean>(true);
  const weekday = ref<string[]>(['周日', '周一', '周二', '周三', '周四', '周五', '周六']);

  // 只用来放置对象和数组，不建议放置单个
  const koiParams = reactive<any>({
      // 定时任务对象
      timer: {
        // 时间
        dateTimer: null,
        // 适应浏览器
        koiTimer: null,
        // Loading定时器
        loadingTimer: null
      },
      // 时间参数对象
      dateParams: {
        dateDay: null,
        dateYear: null,
        dateWeek: null
      },
      screen: {
        // 获取浏览器可视区域高度（包含滚动条）、
        // 获取浏览器可视区域高度（不包含工具栏高度）、
        // 获取body的实际高度  (三个都是相同，兼容性不同的浏览器而设置的)
        screenHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
        screenWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
      },
      height: {
        YHLeftOne: null,
        YHLeftTwo: null,
        YHCenterOne: null,
        YHCenterTwo: null,
        YHCenterThree: null,
        YHRightOne: null,
        YHRightTwo: null,
        YHRightThree: null
      }
  });

  //  页面渲染结束
  onMounted( async () => {
    // 页面大小改变时触发
    window.addEventListener('resize', getScreenHeight, false);
    // 页面大小改变时触发
    window.addEventListener('resize', getScreenWidth, false);
    // 鼠标移动时触发
    // window.addEventListener('mousemove',getHeight, false);
    // 时间定时器
    timeInterval();
    // 取消Loading定时器
    cancelLoading();
    // 自适应屏幕宽高定时器
    resizeScreen();
  })

  // Vue实例销毁之前
  onBeforeUnmount(() => {
    // 清除时间定时器
    clearInterval(koiParams.timer.dateTimer);
    koiParams.timer.dateTimer = null;
    // 清除loading定时器
    clearInterval(koiParams.timer.loadingTimer);
    koiParams.timer.loadingTimer = null;
    // 清除自适应屏幕宽高定时器
    clearInterval(koiParams.timer.koiTimer);
    koiParams.timer.koiTimer = null;
    // 移除页面大小改变时触发事件
    window.removeEventListener('resize',getScreenHeight);
    // 移除页面大小改变时触发事件
    window.removeEventListener('resize',getScreenWidth);
  })

  // Vue实例销毁之后
  const onUnmounted = () => {

  }

  // 监听事件
  watch(
      () => [koiParams.screen.screenWidth, koiParams.screen.screenHeight],(newVal, oldVal) => {
        // 此时返回的是数组,按下标获取对应值
        // console.log(newVal[0]);
        // console.log(newVal[1]);
          if (newVal[0] <= 1200) {
                ElNotification({
                  title: '浏览器高度提示',
                  message: h('i', { style: 'color: teal' }, '浏览器宽度<1200px自适应效果减弱'),
                  type: 'warning',
                  position: 'bottom-right',
                  duration: 2000
                });
          }

          if (newVal[1] <= 700) {
                ElNotification({
                  title: '浏览器宽度提示',
                  message: h('strong', { style: 'color: teal' }, '浏览器高度<700px自适应效果减弱'),
                  type: 'warning',
                  position: 'bottom-right',
                  duration: 2000
                });
          }
      }
  )

  const timeInterval = () => {
    koiParams.timer.dateTimer = setInterval(() => {
      const date = new Date()
      koiParams.dateParams.dateDay = formatTime(date, 'HH:mm:ss')
      koiParams.dateParams.dateYear = formatTime(date, 'yyyy/MM/dd')
      koiParams.dateParams.dateWeek = weekday.value[date.getDay()]
    }, 1000)
  }

  const cancelLoading = () => {
    koiParams.timer.loadingTimer = setTimeout(() => {
      loading.value = false
    }, 500)
  }

  const resizeScreen = () => {
    koiParams.timer.koiTimer = setInterval(() => {
      getScreenHeight();
      getScreenWidth();
    }, 200)
  }

  // 获取浏览器高度进行自适应
  const getScreenHeight = () => {
      let screenHeight = koiParams.screen.screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      // 四舍五入取整数
      koiParams.height.YHLeftOne = Math.round(screenHeight * 0.46);
      koiParams.height.YHLeftTwo = Math.round(screenHeight * 0.46);
      koiParams.height.YHCenterOne= Math.round(screenHeight * 0.18);
      koiParams.height.YHCenterTwo = Math.round(screenHeight * 0.37);
      koiParams.height.YHCenterThree = Math.round(screenHeight * 0.37);
      koiParams.height.YHRightOne = Math.round(screenHeight * 0.3);
      koiParams.height.YHRightTwo = Math.round(screenHeight * 0.31);
      koiParams.height.YHRightThree = Math.round(screenHeight * 0.31);
      //console.log(screenHeight +"-"+ Math.round(percentHThirty) +"-"+ Math.round(percentHForty));
  }
  // 字体大小根据宽度自适应
  const getScreenWidth = () => {
    const screenWidth = koiParams.screen.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    // console.log("hh-"+screenWidth+"-"+koiParams.screen.screenHeight);
  }

  // 点击跳转Gitee页面
  const handleSkip = () => {
    window.location.href = 'https://gitee.com/BigCatHome/koi-screen';
  }

</script>

<style lang="scss" scoped>
// 引入自定义全局样式
// @import '@/assets/scss/style.scss';
</style>
